<template>
  <div class="container">
    <el-drawer
      v-model="show_type_page"
      direction="rtl"
      size="40%"
      destroy-on-close
      :close-on-click-modal="false"
      @close="get_list(), $emit('close')"
    >
      <template #title>
        <h4>类型管理</h4>
      </template>
      <template #default>
        <div class="border p_10">
          <div>新增</div>
          <div class="flex m_top10">
            <el-input
              v-model="name"
              placeholder="请输入"
              show-word-limit
              maxlength="30"
            ></el-input>
            <el-button
              type="primary"
              class="m_left10"
              @click="submit"
              :loading="btn_loading"
              >确定</el-button
            >
          </div>
        </div>
        <el-table :data="list" class="tc m_top10" border>
          <el-table-column label="名称" prop="name">
            <template #default="scope: any">
              <el-input
                v-model="scope.row.name"
                v-if="scope.row.updateing"
                placeholder="请输入"
                show-word-limit
                maxlength="30"
              ></el-input>
              <div v-else>{{ scope.row.name }}</div>
            </template>
          </el-table-column>
          <el-table-column label="操作">
            <template #default="scope: any">
              <div v-if="scope.row.updateing">
                <el-button
                  @click="
                    update_submit({ item: scope.row, index: scope.$index })
                  "
                  type="primary"
                  >确定</el-button
                >
                <el-button
                  @click="get_list(), (list[scope.$index].updateing = false)"
                  >取消</el-button
                >
              </div>
              <div v-else>
                <el-button
                  @click="update_list({ item: scope.row, index: scope.$index })"
                  >编辑</el-button
                >
                <el-button @click="delete_list(scope)">删除</el-button>
              </div>
            </template>
          </el-table-column>
        </el-table>
      </template>
    </el-drawer>
  </div>
</template>

<script lang="ts" setup>
import { handle_search_key } from '@/utils/check_role'
import { ref, onMounted, computed } from 'vue'
import axios from '@/service/HttpRequest'
import serviceApi from '@/service/api'
import { ElMessage, ElMessageBox } from 'element-plus'
import EventBus from '@/utils/EventBus'
const props = defineProps({
  show_type_page: Boolean,
  type: String,
})
const btn_loading = ref(false)
const name = ref('')
const list = ref()
const paeg_data = ref({
  cdkId: '',
  name: '',
  type: computed(() => {
    return props.type
  }),
})
const update_list = (e) => {
  list.value.some((item) => {
    if (item.updateing) {
      item.updateing = false
    }
  })
  list.value[e.index].updateing = true
}
const update_submit = (e) => {
  if (e.item.name == '') {
    ElMessage.error('请输入类型名称')
    return
  }
  let has_name = list.value.some((item) => {
    return item.id !== e.item.id && item.name == e.item.name
  })
  if (has_name) {
    ElMessage.error('类型名称重复')
    return
  }
  axios
    .request({
      url: serviceApi.drawingType_curd + '/' + e.item.id,
      method: 'put',
      data: { name: e.item.name },
    })
    .then(() => {
      ElMessage.success('操作成功！')
      setTimeout(() => {
        EventBus.emit('change_type_list')
        list.value[e.index].updateing = false
      }, 1000)
    })
    .catch((err) => {
      ElMessage.error(err)
    })
}
const delete_list = (e) => {
  ElMessageBox.confirm('确定删除该类型 - ' + e.row.name + ' ？', '', {
    cancelButtonText: '取消',
    closeOnClickModal: false,
    confirmButtonText: '确定',
    type: 'warning',
  })
    .then(() => {
      axios
        .request({
          url: serviceApi.drawingType_curd + '/' + e.row.id,
          method: 'delete',
        })
        .then(() => {
          ElMessage.success('操作成功！')
          setTimeout(() => {
            EventBus.emit('change_type_list')
            get_list()
          }, 1000)
        })
        .catch((err) => {
          ElMessage.error(err)
        })
    })
    .catch(() => {})
}
const submit = () => {
  if (name.value == '') {
    ElMessage.error('请输入类型名称')
    return
  }
  let has_name = list.value.some((item) => {
    return item.name == name.value
  })
  if (has_name) {
    ElMessage.error('类型名称重复')
    return
  }
  if (btn_loading.value) return
  btn_loading.value = true
  axios
    .request({
      url: serviceApi.drawingType_curd,
      method: 'post',
      data: { name: name.value, type: props.type },
    })
    .then((res) => {
      console.log(res)
      ElMessage.success('操作成功！')
      setTimeout(() => {
        get_list()
        EventBus.emit('change_type_list')
        name.value = ''
        btn_loading.value = false
      }, 1000)
    })
    .catch((err) => {
      btn_loading.value = false
      ElMessage.error(err)
    })
}
onMounted(() => {
  get_list()
})
const get_list = () => {
  axios
    .request({
      url: serviceApi.drawingType_list,
      method: 'post',
      data: handle_search_key(paeg_data.value),
    })
    .then((res) => {
      console.log(res)
      res.data.forEach((item) => {
        item.updateing = false
      })
      list.value = res.data
    })
    .catch((err) => {
      ElMessage.error(err)
    })
}
</script>

<style lang="scss" scoped>
:deep(.el-input__inner) {
  padding-right: 11px;
}
</style>
